<nz-content style="padding:0 50px;">
    <!-- <nz-breadcrumb style="margin:16px 0;">
        <nz-breadcrumb-item *ngIf="user">{{user.id}}</nz-breadcrumb-item>
    </nz-breadcrumb> -->
    <div nz-row [nzGutter]="20">
        <div nz-col nzSpan="12">
            <nz-tabset nzBordered>
                <nz-tab [nzTitle]="'待办理 (' + count + ')'">
                    <div *ngIf="page && page.content; else noData">
                        <nz-table #basicTable [nzData]="page.content">
                            <thead>
                                <tr>
                                    <th>类型</th>
                                    <th>标题</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let data of basicTable.data">
                                    <td>{{data.categoryName}}</td>
                                    <td>{{data.title}}</td>
                                    <td>{{data.payStatus}}</td>
                                    <td>
                                        <!-- [disabled]="item.payStatus === 1" -->
                                        <a (click)="orderDetails.onShow(data)">处理</a>
                                            <!-- <a (click)="onShow(data)">详情</a>
                                        <nz-divider nzType="vertical"></nz-divider>
                                        <a>处理</a> -->
                                    </td>
                                </tr>
                            </tbody>
                        </nz-table>
                    </div>
                    <ng-template #noData>暂无数据</ng-template>
                </nz-tab>
                <!-- <nz-tab [nzTitle]="'已办理'">
                    <nz-table #basicTable [nzData]="dataSet">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Age</th>
                                <th>Address</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let data of basicTable.data">
                                <td>{{data.name}}</td>
                                <td>{{data.age}}</td>
                                <td>{{data.address}}</td>
                                <td>
                                    <a (click)="showModal()">详情</a>
                                </td>
                            </tr>
                        </tbody>
                    </nz-table>
                </nz-tab>
                <nz-tab [nzTitle]="'全部'">
                    <nz-table #basicTable [nzData]="dataSet">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Age</th>
                                <th>Address</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let data of basicTable.data">
                                <td>{{data.name}}</td>
                                <td>{{data.age}}</td>
                                <td>{{data.address}}</td>
                                <td>
                                    <a>详情</a>
                                    <nz-divider nzType="vertical"></nz-divider>
                                    <a>处理</a>
                                </td>
                            </tr>
                        </tbody>
                    </nz-table>
                </nz-tab> -->
            </nz-tabset>
            <!-- <ng-template #searchTemplate>
                <button nz-button nzType="default" nzShape="circle">
                    <i class="anticon anticon-sync"></i>
                </button>
            </ng-template> -->
        </div>
        <!-- <div nz-col nzSpan="1"></div> -->
        <div nz-col nzSpan="12">
            <div class="news-infinite-container" infiniteScroll>
                <nz-list class="news-list" [nzDataSource]="news" [nzHeader]="newsHeader" nzBordered [nzItemLayout]="'horizontal'" [nzLoading]="loading"
                    style="background-color: #fff;" [nzRenderItem]="item" [nzLoadMore]="clear">
                    <ng-template #item let-item>
                        <!-- [nzContent]="'content'" -->
                        <nz-list-item [nzActions]="[removeAction,moreAction]">
                            <ng-template #removeAction>
                                <button nz-button nzType="danger" nzValue="small" nzGhost (click)="onRemove(item)">移除</button>
                            </ng-template>
                            <ng-template #moreAction>
                                <button (click)="details.gotoDetail(item.target)" nz-button nzType="primary" [disabled]="item.disabled">抢单</button>
                            </ng-template>
                            <nz-list-item-meta [nzTitle]="nzTitle" nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" [nzDescription]="nzDescription">
                                <ng-template #nzTitle>
                                    <a>{{item.categoryName}}</a>
                                    <span style="color:coral;">{{item.created | date:'HH:mm:ss'}}</span>
                                </ng-template>
                                <ng-template #nzDescription>
                                    车型:{{item.carModelName}}
                                    <br/> 车架号:{{item.vin}}
                                </ng-template>
                            </nz-list-item-meta>
                        </nz-list-item>
                    </ng-template>
                    <ng-template #clear>
                        <div *ngIf="showClear" class="clear">
                            <button nz-button (click)="onClear()">清空</button>
                        </div>
                    </ng-template>
                    <ng-template #newsHeader>
                        接收消息:
                        <label nz-checkbox [ngModel]="true" (ngModelChange)="handleChange1($event)">云狗专家</label>
                        <label nz-checkbox [ngModel]="false" (ngModelChange)="handleChange2($event)">特殊工具</label>
                        <label nz-checkbox [ngModel]="false" (ngModelChange)="handleChange3($event)">VIN计算</label>
                        <!-- <nz-checkbox-group [(ngModel)]="checkOptionsOne" (ngModelChange)="updateSingleChecked()"></nz-checkbox-group> -->
                    </ng-template>
                </nz-list>
            </div>
        </div>
    </div>
    <app-news-details #details></app-news-details>
    <app-order-details #orderDetails></app-order-details>

    <ng-template #extraTemplate>
        <a>More</a>
    </ng-template>
    <div style="background:#ECECEC; padding: 4px; min-height: 480px;">
        <button nz-button (click)="start()" [nzType]="'primary'">Start</button>
    </div>
    <!-- nzComponentParams -->

</nz-content>